<template>
  <div class="diagnosis-treatment-container">
    <!-- 左侧诊疗记录列表 -->
    <div class="records-sidebar">
      <div class="sidebar-header">
        <h3>诊疗记录</h3>
        <button class="add-record-btn" @click="showAddRecordDialog">+新增</button>
      </div>
      
      <div class="records-list">
        <div 
          v-for="(record, index) in medicalRecords" 
          :key="index"
          class="record-item"
          :class="{ 'active': index === selectedRecordIndex }"
          @click="selectRecord(index)"
        >
          <div class="record-header">
            <input type="radio" :checked="index == selectedRecordIndex" disabled>
            <span class="record-date">{{ record.date }}</span>
            <span class="record-status" :class="record.status">
              {{ record.statusText }}
            </span>
          </div>
          <div class="record-hospital">{{ record.hospital }}</div>
          <div class="record-more" @click.stop="showDetailDialogFunc(index)">...</div>
        </div>
      </div>
    </div>
    
    <!-- 右侧就诊信息和复诊计划 -->
    <div class="main-content">
      <!-- 就诊信息部分 -->
      <div class="visit-info-section">
        <h3>就诊信息</h3>
        
        <!-- 西医诊断 -->
        <div class="form-group">
          <label class="form-label">西医诊断:</label>
          <input 
            type="text" 
            class="form-input" 
            v-model="model.westernMedicine" 
            placeholder="请输入西医诊断"
          >
        </div>
        
        <!-- 建议 -->
        <div class="form-group">
          <label class="form-label">建议:</label>
          <input 
            type="text" 
            class="form-input" 
            v-model="model.suggestion" 
            placeholder="请输入建议"
          >
        </div>
        
        <!-- 体征 -->
        <div class="form-group">
          <label class="form-label">体征:</label>
          <div class="vital-signs">
            <input 
              type="text" 
              class="vital-input" 
              v-model="model.signs" 
              placeholder="体重_kg"
            >
          </div>
        </div>
        
        <!-- 检验 -->
        <div class="form-group">
          <label class="form-label">检验:</label>
          <input 
              type="text" 
              class="vital-input" 
              v-model="model.inspection" 
              placeholder="检验项目"
            >
      
        </div>
        
        <!-- 检查 -->
        <div class="form-group">
          <label class="form-label">检查:</label>
          <input 
              type="text" 
              class="vital-input" 
              v-model="model.check" 
              placeholder="检查项目"
            >
        </div>
        
        <!-- 处方 -->
        <div class="form-group">
          <label class="form-label">处方:</label>
          <input 
              type="text" 
              class="vital-input" 
              v-model="model.prescription" 
              placeholder="请输入处方"
            >
        </div>
        
        <!-- 保存按钮 -->
        <div class="save-section">
          <button class="save-btn" @click="diagnosisAdd">保存</button>
        </div>
      </div>
      
      <!-- 复诊计划部分 -->
      <div class="follow-up-section">
        <div class="follow-up-header">
          <h3>复诊计划</h3>
          <button class="add-follow-up-btn" @click="showAddFollowUpDialog">+复诊</button>
        </div>
        
        <!-- 复诊计划表格 -->
        <div class="follow-up-table-container">
          <table class="follow-up-table">
            <thead>
              <tr>
                <th>建议复诊时间</th>
                <th>复诊科室</th>
                <th>复诊目的</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(followUp, index) in followUpPlans" :key="index">
                <td>{{ followUp.date }}</td>
                <td>{{ followUp.department }}</td>
                <td>{{ followUp.purpose }}</td>
                <td>
                  <button class="delete-btn" @click="deleteFollowUp(index)">删除</button>
                </td>
              </tr>
              <!-- 空行 -->
              <tr v-for="i in 2" :key="`empty-${i}`">
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      
      <!-- 添加复诊计划弹出框 -->
      <div v-if="showFollowUpDialog" class="dialog-overlay" @click="closeFollowUpDialog">
        <div class="dialog-content" @click.stop>
          <div class="dialog-header">
            <h3>添加复诊计划</h3>
            <button class="close-btn" @click="closeFollowUpDialog">×</button>
          </div>
          <div class="dialog-body">
            <div class="form-group">
              <label class="form-label" style="width: 100px;">建议复诊时间:</label>
              <input 
                type="date" 
                class="form-input" 
                v-model="newFollowUp.date"
              >
            </div>
            <div class="form-group">
              <label class="form-label">复诊科室:</label>
              <input 
                type="text" 
                class="form-input" 
                v-model="newFollowUp.department"
                placeholder="请输入复诊科室"
              >
            </div>
            <div class="form-group">
              <label class="form-label">复诊目的:</label>
              <input 
                type="text" 
                class="form-input" 
                v-model="newFollowUp.purpose"
                placeholder="请输入复诊目的"
              >
            </div>
          </div>
          <div class="dialog-footer">
            <button class="cancel-btn" @click="closeFollowUpDialog">取消</button>
            <button class="confirm-btn" @click="addFollowUp">确定</button>
          </div>
        </div>
      </div>
      
      <!-- 新增记录弹出框 -->
      <div v-if="showAddRecordDialogRef" class="dialog-overlay" @click="closeAddRecordDialog">
        <div class="dialog-content" @click.stop>
          <div class="dialog-header">
            <h3>新增诊疗记录</h3>
            <button class="close-btn" @click="closeAddRecordDialog">×</button>
          </div>
          <div class="dialog-body">
            <div class="form-group">
              <label class="form-label">就诊日期:</label>
              <input 
                type="date" 
                class="form-input" 
                v-model="newRecord.date"
              >
            </div>
            <div class="form-group">
              <label class="form-label">医院:</label>
              <input 
                type="text" 
                class="form-input" 
                v-model="newRecord.hospital"
                placeholder="请输入医院名称"
              >
            </div>
            <div class="form-group">
              <label class="form-label">状态:</label>
              <select class="form-input" v-model="newRecord.status">
                <option value="in-progress">进行中</option>
                <option value="completed">已完成</option>
              </select>
            </div>
          </div>
          <div class="dialog-footer">
            <button class="cancel-btn" @click="closeAddRecordDialog">取消</button>
            <button class="confirm-btn" @click="addNewRecord">确定</button>
          </div>
        </div>
      </div>
      
      <!-- 查看详情弹出框 -->
      <div v-if="showDetailDialog" class="dialog-overlay" @click="closeDetailDialog">
        <div class="dialog-content" @click.stop>
          <div class="dialog-header">
            <h3>诊疗记录详情</h3>
            <button class="close-btn" @click="closeDetailDialog">×</button>
          </div>
          <div class="dialog-body">
            <div class="detail-section">
              <h4>基本信息</h4>
              <div class="detail-row">
                <span class="detail-label">就诊日期:</span>
                <span class="detail-value">{{ medicalRecords[selectedRecordIndex].date }}</span>
              </div>
              <div class="detail-row">
                <span class="detail-label">医院:</span>
                <span class="detail-value">{{ medicalRecords[selectedRecordIndex].hospital }}</span>
              </div>
              <div class="detail-row">
                <span class="detail-label">状态:</span>
                <span class="detail-value" :class="medicalRecords[selectedRecordIndex].status">
                  {{ medicalRecords[selectedRecordIndex].statusText }}
                </span>
              </div>
            </div>
            
            <div class="detail-section">
              <h4>就诊信息</h4>
              <div class="detail-row">
                <span class="detail-label">西医诊断:</span>
                <span class="detail-value">{{ currentVisitInfo.diagnosis || '无' }}</span>
              </div>
              <div class="detail-row">
                <span class="detail-label">建议:</span>
                <span class="detail-value">{{ currentVisitInfo.advice || '无' }}</span>
              </div>
              <div class="detail-row">
                <span class="detail-label">体征:</span>
                <span class="detail-value">
                  体重: {{ currentVisitInfo.weight || '无' }}kg, 
                  身高: {{ currentVisitInfo.height || '无' }}cm, 
                  BMI: {{ currentVisitInfo.bmi || '无' }}, 
                  血压: {{ currentVisitInfo.bloodPressure || '无' }}
                </span>
              </div>
            </div>
            
            <div class="detail-section" v-if="testItems.length > 0">
              <h4>检验项目</h4>
              <div class="detail-row">
                <span class="detail-value">
                  <span 
                    v-for="(item, index) in testItems" 
                    :key="index"
                    class="test-tag"
                  >
                    {{ item }}
                  </span>
                </span>
              </div>
            </div>
            
            <div class="detail-section" v-if="followUpPlans.length > 0">
              <h4>复诊计划</h4>
              <div class="detail-row" v-for="(followUp, index) in followUpPlans" :key="index">
                <span class="detail-value">
                  {{ followUp.date }} - {{ followUp.department }} - {{ followUp.purpose }}
                </span>
              </div>
            </div>
          </div>
          <div class="dialog-footer">
            <button class="confirm-btn" @click="closeDetailDialog">确定</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Write } from '@/Http/Axios';
import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';

// 诊疗记录数据
const medicalRecords = ref([
  { date: '2023-05-15', status: 'in-progress', statusText: '进行中', hospital: '中心医院' },
  { date: '2023-05-15', status: 'completed', statusText: '已完成', hospital: '人民医院' },
  { date: '2023-05-15', status: 'completed', statusText: '已完成', hospital: '人民医院' },
  { date: '2023-05-15', status: 'completed', statusText: '已完成', hospital: '人民医院' },
  { date: '2023-05-15', status: 'completed', statusText: '已完成', hospital: '人民医院' },
]);

// 当前选中的记录索引
const selectedRecordIndex = ref(0);

// 就诊信息
const currentVisitInfo = reactive({
  diagnosis: '',
  advice: '',
  weight: '',
  height: '',
  bmi: '',
  bloodPressure: ''
});

const model:any = reactive({
  westernMedicine:"",
  suggestion:"",
  signs:"",
  inspection:"",
  check:"",
  prescription:"",
})//新增
const diagnosisAdd = () =>{
    Write.post("http://localhost:5203/api/Managment/DiagnosisAdd",model)
    .then(res=>{
        if(res.data.code==200){
            ElMessage.success("新增成功");
            
            // 保存就诊信息到当前选中的记录
            if (medicalRecords.value.length > 0 && selectedRecordIndex.value < medicalRecords.value.length) {
              const record = medicalRecords.value[selectedRecordIndex.value];
              
              // 添加或更新就诊信息
              record.visitInfo = {
                diagnosis: model.westernMedicine,
                advice: model.suggestion,
                weight: '',
                height: '',
                bmi: '',
                bloodPressure: model.signs
              };
              
              console.log('就诊信息已保存到记录:', record);
            }
            
            // 清空表单
            model.westernMedicine = '';
            model.suggestion = '';
            model.signs = '';
            model.inspection = '';
            model.check = '';
            model.prescription = '';
        }
        else{
            ElMessage.error("新增失败");
        }
    })
}

// 检验项目
const testItems = ref(['血常规', '血液', '门诊采集']);

// 复诊计划
const followUpPlans = ref([
  { date: '2023-10-10', department: '心内科', purpose: '空腹血糖' }
]);

// 弹出框显示状态
const showFollowUpDialog = ref(false);
const showAddRecordDialogRef = ref(false);
const showDetailDialog = ref(false);

// 新的复诊计划数据
const newFollowUp = reactive({
  date: '',
  department: '',
  purpose: ''
});

// 新增记录的数据
const newRecord = reactive({
  date: '',
  hospital: '',
  status: 'in-progress',
  statusText: '进行中'
});

// 选择记录
const selectRecord = (index: number) => {
  selectedRecordIndex.value = index;
  // 这里可以加载对应记录的详细信息
  console.log(`选择了记录: ${index}`);
  
  // 加载选中记录的就诊信息到表单中
  const record = medicalRecords.value[index];
  if (record.visitInfo) {
    model.westernMedicine = record.visitInfo.diagnosis || '';
    model.suggestion = record.visitInfo.advice || '';
    model.signs = record.visitInfo.bloodPressure || '';
    // 其他字段可以根据需要添加
  } else {
    // 如果没有就诊信息，清空表单
    model.westernMedicine = '';
    model.suggestion = '';
    model.signs = '';
    model.inspection = '';
    model.check = '';
    model.prescription = '';
  }
};

// 添加检验项目
const addTestItem = () => {
  // 实际项目中应该打开一个对话框让用户选择检验项目
  console.log('添加检验项目');
};

// 添加检查项目
const addCheckupItem = () => {
  console.log('添加检查项目');
};

// 添加处方项目
const addPrescriptionItem = () => {
  console.log('添加处方项目');
};

// 保存就诊信息
const saveVisitInfo = () => {
  console.log('保存就诊信息', currentVisitInfo);
  
  // 将就诊信息保存到当前选中的记录中
  if (medicalRecords.value.length > 0 && selectedRecordIndex.value < medicalRecords.value.length) {
    const record = medicalRecords.value[selectedRecordIndex.value];
    
    // 添加或更新就诊信息
    record.visitInfo = {
      diagnosis: currentVisitInfo.diagnosis,
      advice: currentVisitInfo.advice,
      weight: currentVisitInfo.weight,
      height: currentVisitInfo.height,
      bmi: currentVisitInfo.bmi,
      bloodPressure: currentVisitInfo.bloodPressure
    };
    
    console.log('就诊信息已保存到记录:', record);
    alert('就诊信息保存成功！');
  } else {
    alert('请选择一个有效的诊疗记录！');
  }
  
  // 这里可以调用API保存数据
};

// 显示添加复诊计划弹出框
const showAddFollowUpDialog = () => {
  // 重置表单数据
  newFollowUp.date = '';
  newFollowUp.department = '';
  newFollowUp.purpose = '';
  showFollowUpDialog.value = true;
};

// 关闭添加复诊计划弹出框
const closeFollowUpDialog = () => {
  showFollowUpDialog.value = false;
};

// 显示新增记录弹出框
const showAddRecordDialog = () => {
  // 重置表单数据
  newRecord.date = '';
  newRecord.hospital = '';
  newRecord.status = 'in-progress';
  newRecord.statusText = '进行中';
  showAddRecordDialogRef.value = true;
};

// 关闭新增记录弹出框
const closeAddRecordDialog = () => {
  showAddRecordDialogRef.value = false;
};

// 显示详情弹出框
const showDetailDialogFunc = (index: number) => {
  selectedRecordIndex.value = index;
  showDetailDialog.value = true;
  
  // 加载选中记录的就诊信息
  const record = medicalRecords.value[index];
  if (record.visitInfo) {
    // 更新currentVisitInfo以显示在详情弹出框中
    currentVisitInfo.diagnosis = record.visitInfo.diagnosis || '';
    currentVisitInfo.advice = record.visitInfo.advice || '';
    currentVisitInfo.weight = record.visitInfo.weight || '';
    currentVisitInfo.height = record.visitInfo.height || '';
    currentVisitInfo.bmi = record.visitInfo.bmi || '';
    currentVisitInfo.bloodPressure = record.visitInfo.bloodPressure || '';
  } else {
    // 如果没有就诊信息，清空表单
    currentVisitInfo.diagnosis = '';
    currentVisitInfo.advice = '';
    currentVisitInfo.weight = '';
    currentVisitInfo.height = '';
    currentVisitInfo.bmi = '';
    currentVisitInfo.bloodPressure = '';
  }
};

// 关闭详情弹出框
const closeDetailDialog = () => {
  showDetailDialog.value = false;
};

// 添加新记录
const addNewRecord = () => {
  // 验证表单数据
  if (!newRecord.date || !newRecord.hospital) {
    alert('请填写完整的记录信息');
    return;
  }
  
  // 添加到记录列表，初始化visitInfo为undefined
  medicalRecords.value.unshift({
    date: newRecord.date,
    hospital: newRecord.hospital,
    status: newRecord.status,
    statusText: newRecord.statusText,
    visitInfo: undefined
  });
  
  // 选中新增的记录
  selectedRecordIndex.value = 0;
  
  // 清空表单
  newRecord.date = '';
  newRecord.hospital = '';
  
  // 关闭弹出框
  closeAddRecordDialog();
  
  console.log('添加新记录', newRecord);
};

// 添加复诊计划
const addFollowUp = () => {
  // 验证表单数据
  if (!newFollowUp.date || !newFollowUp.department || !newFollowUp.purpose) {
    alert('请填写完整的复诊信息');
    return;
  }
  
  // 添加到复诊计划列表
  followUpPlans.value.push({
    date: newFollowUp.date,
    department: newFollowUp.department,
    purpose: newFollowUp.purpose
  });
  
  // 关闭弹出框
  closeFollowUpDialog();
  
  console.log('添加复诊计划', newFollowUp);
};

// 删除复诊计划
const deleteFollowUp = (index: number) => {
  if (confirm('确定要删除这个复诊计划吗？')) {
    followUpPlans.value.splice(index, 1);
    console.log(`删除了复诊计划: ${index}`);
  }
};
</script>

<style scoped>
/* 全局容器 */
.diagnosis-treatment-container {
  display: flex;
  height: 100vh;
  background-color: #f5f5f5;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* 左侧诊疗记录列表 */
.records-sidebar {
  width: 280px;
  background-color: #ffffff;
  border-right: 1px solid #e8e8e8;
  display: flex;
  flex-direction: column;
}

.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #e8e8e8;
}

.sidebar-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.add-record-btn {
  padding: 4px 12px;
  background-color: #1890ff;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.add-record-btn:hover {
  background-color: #40a9ff;
}

.records-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}

.record-item {
  padding: 15px;
  margin-bottom: 10px;
  background-color: #fafafa;
  border: 1px solid #f0f0f0;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
}

.record-item:hover {
  background-color: #f0f9ff;
  border-color: #91d5ff;
}

.record-item.active {
  background-color: #e6f7ff;
  border-color: #1890ff;
}

.record-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.record-date {
  margin-left: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.record-status {
  margin-left: auto;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
}

.record-status.in-progress {
  background-color: #e6f7ff;
  color: #1890ff;
}

.record-status.completed {
  background-color: #f6ffed;
  color: #52c41a;
}

.record-hospital {
  font-size: 13px;
  color: #666;
  margin-bottom: 5px;
}

.record-more {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 12px;
  color: #999;
}

/* 右侧主内容区域 */
.main-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

/* 就诊信息部分 */
.visit-info-section {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.visit-info-section h3 {
  margin: 0 0 20px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

/* 表单组 */
.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: inline-block;
  width: 80px;
  font-size: 14px;
  color: #333;
  margin-right: 10px;
  text-align: right;
}

.form-input {
  width: 300px;
  padding: 8px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
  transition: all 0.3s;
}

.form-input:focus {
  outline: none;
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

/* 体征输入 */
.vital-signs {
  display: inline-flex;
  gap: 10px;
  align-items: center;
}

.vital-input {
  width: 120px;
  padding: 8px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
}

/* 添加按钮 */
.add-item-btn {
  width: 24px;
  height: 24px;
  background-color: #1890ff;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
  transition: background-color 0.3s;
}

.add-item-btn:hover {
  background-color: #40a9ff;
}

/* 检验项目 */
.test-items {
  margin-top: 10px;
  margin-left: 90px;
}

.test-tags {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.test-tag {
  padding: 4px 12px;
  background-color: #e6f7ff;
  color: #1890ff;
  border-radius: 12px;
  font-size: 12px;
  border: 1px solid #91d5ff;
}

.test-info {
  font-size: 14px;
  color: #666;
}

.test-department {
  color: #1890ff;
  background-color: #f0f0f0;
  padding: 2px 8px;
  border-radius: 4px;
  margin: 0 5px;
}

/* 保存按钮 */
.save-section {
  margin-top: 30px;
  margin-left: 90px;
}

.save-btn {
  padding: 8px 24px;
  background-color: #52c41a;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.save-btn:hover {
  background-color: #73d13d;
}

/* 复诊计划部分 */
.follow-up-section {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.follow-up-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.follow-up-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.add-follow-up-btn {
  padding: 4px 12px;
  background-color: #1890ff;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.add-follow-up-btn:hover {
  background-color: #40a9ff;
}

/* 复诊计划表格 */
.follow-up-table-container {
  overflow-x: auto;
}

.follow-up-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.follow-up-table th {
  background-color: #fafafa;
  padding: 12px;
  text-align: left;
  font-weight: 600;
  color: #333;
  border-bottom: 2px solid #e8e8e8;
}

.follow-up-table td {
  padding: 12px;
  border-bottom: 1px solid #f0f0f0;
  color: #666;
}

.delete-btn {
  padding: 2px 8px;
  background-color: #ffffff;
  color: #ff4d4f;
  border: 1px solid #ffccc7;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s;
}

.delete-btn:hover {
  background-color: #fff1f0;
  border-color: #ff4d4f;
}

/* 滚动条样式 */
.records-list::-webkit-scrollbar,
.main-content::-webkit-scrollbar {
  width: 6px;
}

.records-list::-webkit-scrollbar-thumb,
.main-content::-webkit-scrollbar-thumb {
  background-color: #d9d9d9;
  border-radius: 3px;
}

.records-list::-webkit-scrollbar-track,
.main-content::-webkit-scrollbar-track {
  background-color: #f0f0f0;
}

.follow-up-table-container::-webkit-scrollbar {
  height: 6px;
}

.follow-up-table-container::-webkit-scrollbar-thumb {
  background-color: #d9d9d9;
  border-radius: 3px;
}

.follow-up-table-container::-webkit-scrollbar-track {
  background-color: #f0f0f0;
}

/* 弹出框样式 */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.dialog-content {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  width: 500px;
  max-width: 90%;
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.dialog-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #999;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-btn:hover {
  color: #666;
}

.dialog-body {
  padding: 20px;
}

.dialog-body .form-group {
  margin-bottom: 15px;
}

.dialog-body .form-label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
  color: #333;
}

.dialog-body .form-input {
  width: 100%;
  box-sizing: border-box;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  padding: 20px;
  border-top: 1px solid #f0f0f0;
  gap: 10px;
}

.cancel-btn,
.confirm-btn {
  padding: 8px 24px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.cancel-btn {
  background-color: #ffffff;
  color: #666;
  border: 1px solid #d9d9d9;
}

.cancel-btn:hover {
  background-color: #f5f5f5;
}

.confirm-btn {
  background-color: #1890ff;
  color: #ffffff;
  border: none;
}

.confirm-btn:hover {
  background-color: #40a9ff;
}

/* 详情弹出框样式 */
.detail-section {
  margin-bottom: 20px;
}

.detail-section h4 {
  margin: 0 0 10px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 5px;
}

.detail-row {
  display: flex;
  margin-bottom: 8px;
}

.detail-label {
  width: 100px;
  font-weight: 500;
  color: #666;
}

.detail-value {
  flex: 1;
  color: #333;
}

.detail-value.in-progress {
  color: #1890ff;
}

.detail-value.completed {
  color: #52c41a;
}
</style>